<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
   <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
   <%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
     
<%@ taglib  prefix="security" uri="http://www.springframework.org/security/tags" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="<c:url value="/js/view.js" />" type="text/javascript"></script>
		<script src="<c:url value="/js/calendar.js" />" type="text/javascript"></script>
		
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>reservation étape finale</title>
 <c:url  var="css1" value="/css/bootstrap/css/bootstrap.css"></c:url>
	<c:url  var="css2" value="/css/sitemarchand/style.css"></c:url>
	<c:url  var="css3" value="/css/sitemarchand/view.css"></c:url>
	 <link type="text/css" rel="stylesheet" href="${css1 }" />
	  <link type="text/css" rel="stylesheet" href="${css2 }" />
  <link type="text/css" rel="stylesheet" href="${css3 }" />
  <style type="text/css">
  body{background: #ededed;margin:0;padding:0;}#menu_wrap{position:relative;margin-top:20px;margin-left:auto;margin-right:auto;padding:0; padding-right:10px;width:800px;height:40px;list-style-type:none;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);-moz-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2)}.button a{cursor:pointer;text-align:center;font:13px/100% Arial, Helvetica, sans-serif;font-weight:bold;position:relative;min-width:50px;height:20px;float:left;padding:10px;padding-top:10px;padding-bottom:10px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}.button:first-child a{-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-moz-border-topleft-radius:10px;-moz-border-bottomleft-radius:10px;border-top-left-radius:10;border-bottom-left-radius:10px}.Blue,.Blue .button a{color:#d9eef7;background: #00adee;border-right:solid 1px #0078a5;background: -moz-linear-gradient(top, #00adee 0%, #0078a5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00adee), color-stop(100%,#0078a5));background: -webkit-linear-gradient(top, #00adee 0%,#0078a5 100%);background: -o-linear-gradient(top, #00adee 0%,#0078a5 100%);background: -ms-linear-gradient(top, #00adee 0%,#0078a5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00adee', endColorstr='#0078a5',GradientType=0 );background: linear-gradient(top, #00adee 0%,#0078a5 100%);}.Blue .button a:hover,.Blue .button a:focus{background: #0095cc;background: -moz-linear-gradient(top, #0095cc 0%, #00678e 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0095cc), color-stop(100%,#00678e));background: -webkit-linear-gradient(top, #0095cc 0%,#00678e 100%);background: -o-linear-gradient(top, #0095cc 0%,#00678e 100%);background: -ms-linear-gradient(top, #0095cc 0%,#00678e 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0095cc', endColorstr='#00678e',GradientType=0 );background: linear-gradient(top, #0095cc 0%,#00678e 100%);}.Blue .button a:active{background: #0078a5;background: -moz-linear-gradient(top, #0078a5 0%, #00adee 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0078a5), color-stop(100%,#00adee));background: -webkit-linear-gradient(top, #0078a5 0%,#00adee 100%);background: -o-linear-gradient(top, #0078a5 0%,#00adee 100%);background: -ms-linear-gradient(top, #0078a5 0%,#00adee 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0078a5', endColorstr='#00adee',GradientType=0 );background: linear-gradient(top, #0078a5 0%,#00adee 100%);}.search{position:relative;float:right;margin-top:10px;}.search input[type=text]{width:120px;height:20px;padding-left:18px;margin-left:10px;padding-right:4px;outline:none;border: none;-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;-moz-box-shadow: inset 1px 1px 3px #7a7a7a;box-shadow: inset 1px 1px 3px #7a7a7a;}.search a:before {width:6px;height:6px;border:2px solid  #000;background:transparent;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;}.search a:after {left:24px;width:2px;height:7px;margin-top:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}li a:before, li a:after {content:"";position:absolute;top:50%;left:15px;}li a:before, li a:after {margin:-7px 0 0;background: #000;}
   </style>
   
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
   <script type="text/javascript">var search_input= $('.search input[type=text]');var search_input_size = 120; var search_large_size = 180; var padding = 7; var shrinked = "";$(document).ready(function(){search_input.click(function(){shrink();}).focus(function(){shrink();});search_input.blur(function(){ if(shrinked=="YES")normal();});$('.button a').hover(function(){if(shrinked=="YES")normal();}); });function shrink(){if(search_input_size < search_large_size ){$('.button a').each(function(){$(this).animate({'padding-left': padding+'px','padding-right': padding+'px'},'fast');});search_input.animate({'width': search_large_size+'px'},'fast'); shrinked="YES";}return false;}function normal(){search_input.animate({'width':search_input_size+'px'},'fast'); $('.button a').animate({'padding-left':'10px','padding-right':'10px'},'fast');shrinked="";search_input.blur();return false;}</script>
</head>
<body>
<ul id="menu_wrap" class="Blue"><li class="button"><a href="<c:url value="/" />">Accueil</a></li>
 
<li class="search"><a href="#"></a><input type="text" placeHolder="Search"  /></li>
</ul>
<div>
<c:url value="/reservation" var="url"/>
<form:form action="${url }"  method="post" commandName="r"  onsubmit="return setupdate();"  enctype="multipart/form-data">
					<div class="form_description">
			<h2>Réservation</h2>
			<div style="color:black;font-size:20px; border-style:outset; background-color: grey;">
			${menuepuise}
			<hr/>
			${menuintrouvable}
			</div>
			 <div class="btn info">
			 
			 ${erreurajoutreservation} 
			 
			 </div>
		</div>						
			<ul >
			
					<li id="li_1" >
		<form:label cssClass="description" path="menureserve.nom">${menureserve.nom } </form:label>
		<div>
			<form:hidden path="menureserve.nom"   /> 
			
		</div> 
		</li>		<li id="li_2" >
		<form:label class="description" path="menureserve.description">${menureserve.description } </form:label>
		<div>
			<form:hidden    path="menureserve.description"  /> 
		</div> 
		</li>		<li id="li_3" >
		 <div>
			<form:hidden path="menureserve.disponible"   /> 
		</div> 
		</li>		<li id="li_4" >
		 <div>
			<form:hidden path="menureserve.estmenudujour"   /> 
			</div> 
		</li>		
		<li id="li_44" >
		<form:label class="description" path="nombredepersonne">Nombre de personnes conviées</form:label>
		<div>
			<form:hidden path="menureserve.quantite"  /> 
			<form:hidden path="status"  /> 
			<form:hidden path="client.username"  /> 
			<form:hidden path="client.nom"  /> 
			<form:hidden path="client.prenom"  /> 
			<form:hidden path="client.id"  /> 
			<form:hidden path="client.enable"  /> 
			<form:hidden path="client.password"  /> 
			<form:hidden path="menureserve.id"  /> 
			<form:hidden path="client.adresse.pays"  /> 
			<form:hidden path="client.adresse.ville"  /> 
			<form:hidden path="client.adresse.codepostale"  /> 
			<form:hidden path="client.adresse.voie"  /> 
			 <form:hidden path="client.adresse.id"  /> 
			 <form:hidden path="client.adresse.telephone"  /> 
			 <form:hidden path="client.adresse.portable"  /> 
			 
			 
			<form:input path="nombredepersonne" cssClass="input text medium" maxlength="2" autocomplete="false"/>
			</div> 
		</li>	
		
		
					<li id="li_134" >
		<label class="description" for="element_134">Date </label>
		<span>
			<form:input path="datereservation.day" cssClass="element text" size="2" maxlength="2"  /> 
			<form:label path="datereservation.day">Jour</form:label>
		</span>
		<span>
			<form:input path="datereservation.month" cssClass="element text" size="2" maxlength="2"   /> 
			<form:label path="datereservation.month">Mois</form:label>
		</span>
		<span>
	 		<form:input path="datereservation.year" cssClass="element text" size="4" maxlength="4" />
			<form:label path="datereservation.year">Année</form:label>
		</span>
	
		<span id="calendar_1">
			<img id="cal_img_1" class="datepicker" src="<c:url value="/images/calendar.gif" />" alt="choisir la date." />	
		</span>
		<script type="text/javascript">
			Calendar.setup({
			inputField	 : "element_1_3",
			baseField    : "element_1",
			displayArea  : "calendar_1",
			button		 : "cal_img_1",
			ifFormat	 : "%B %e, %Y",
			onSelect	 : selectEuropeDate
			});
			 
			function setupdate(){
				el=document.getElementById("datereservation.year");
				if(el){
					el.value=eval(el.value-1900);
					 
				}
				el1=document.getElementById("datereservation.month");
				if(el1){
					el1.value=eval(el1.value-1);
					 
				}
				
				
				return true;
			}
			function setupdateonstart(){
				el=document.getElementById("datereservation.year");
				if(el){
					el.value=eval(el.value+"+"+1900);
					 
				}
				el1=document.getElementById("datereservation.month");
				if(el1){
					el1.value=eval(el1.value+"+"+1);
					 				}
				
				
				 
			}
			setupdateonstart();
		</script>
		 
		</li>
		
		
		<!-- pays -->
		 
		<form:hidden   path="menureserve.periode" /> 
			<form:hidden   path="menureserve.prix.prix" /> 
		 <form:hidden   path="menureserve.prix.id" /> 
		 
 <form:hidden   path="menureserve.prix.devise" /> 
<form:hidden   path="menureserve.image" /> 
		 
		 
		
		 		 
			
					<li class="buttons">
			     
				<input id="saveForm" class="button_text" type="submit" name="submit" value="valider la réservation" />
		</li>
			</ul>
		</form:form>	
		 
	</div>
</body>
</html>